<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>活动管理-活动报名信息</title>
	<c:import url="/public/head-tag.jsp"/>
	<style>
	.item-toolbar{padding:5px;}
	.toolbar-title{font-size:14px}
	</style>
</head>
<body>
    <c:import url="/public/header.jsp"/>
    
    <section class="container">
		<c:set var="sidebar" scope="request" value="content"/>
	    <c:set var="navbar" scope="request" value="activity"/>
	    <c:import url="/public/sidebar.jsp"/>
	    
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				 <div class="bread">
    					<a href="/Manager/web/action/listPage">活动管理</a>
    					<span>&gt;</span>
    					<span>活动数据</span>
    				</div>
    			</h3>
    				
    		</div>
    		
    		<div class="content-main">
				<section class="content-item" data-template="item/list" id="box">
					<div class="content-item-top">
						<div class="item-toolbar">
							<span class="toolbar-title" v-text="form.title"></span>
						</div> 
					</div>
					
					<div class="content-item-block">
					暂时没有可查看的数据。
					</div>
					
				</section>
    		</div>
    	</div>
    </section>
    
    
   <script src="/pages/assets/js/require.all.js"></script>
   <script>
        requirejs([
            'vue', 
            'artTemplate', 
            'artDialog',
            
            'utils.search', 
            'utils.action', 
            'utils.converter', 
            'vender.modal', 
        ], 
        function(Vue, template, dialog, Search, ActionModel, Converter){
            var search = new Search().getParams();

            var Action = new ActionModel({
                maps:{
                    'form.detail' : '/Manager/web/action/detail?id={id}'
                }
            })
            
            var App={
                
                alert : function(){
                   return Modal.alert.apply(this, arguments) ;
                },
                
                getAppData :function(){
                    
                    var dtd = $.Deferred();
                    
                    var url = Action.get('form.detail', search);
                    $.getJSON(url, function(result){
                        var code = result.code;
                        if(code==200){
                            dtd.resolve(result.data)
                        }else{
                            var msg = result.msg || '数据获取失败！';
                            dtd.reject(msg)
                        }
                    })
                    .fail(function(e, type, msg){
                        dtd.reject(type + msg)
                    })
                    return dtd;
                },
                
                initApp:function(appData){
                    new Vue({
                        el:'body',
                        computed:{
                            'form':function(){
                                return this.getStore().form;
                            }
                        },
                        filters:{
                            formatDate :function(date, format){
                                format = format || 'YYYY-MM-DD HH:mm';
                                return moment(date).format(format)
                            }
                        },
                        methods:{
                            
                            getInitData :function(){
                                return {
                                    store:{
                                        form:appData
                                    }
                                }
                            },
                            
                            getStore :function(){
                                return this.store;
                            }
                        },
                        data:function(){
                            return this.getInitData()
                        }
                    })
                },
                
                
                initEvents:function(){
                    
                    $("body").on("click","[action]:not(form)",function(){
                        var $this=$(this);
                        var action=$this.attr("action");
                        var data=$this.data("params");
                        if (action == "item.changeState") {
                            App.changeItemState(data);
                        }
                        return false;
                    })
                },
                
                init : function(){

                    
                    var app = this;
                    
                    app.getAppData().then(function(data){
                        
                        data = new Converter({
                            'id':'actionId'
                        }).convert(data)
                        
                        app.initApp(data);
                        app.initEvents();
                        
                    })
                    .fail(function(msg){
                        app.alert(msg)
                    })
                }
            }
            App.init();
        })
        </script>
    </body>
</html>